<!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>jQuery UI 进度条（ProgressBar）</title>
		<link rel="stylesheet" href="../../js/lib/jquery-ui-1.12.1/start/jquery-ui.css">
		<link rel="stylesheet" href="../../js/lib/jquery-ui-1.12.1/start/jquery-ui.theme.css">
		<link rel="stylesheet" href="../../js/lib/jquery-ui-1.12.1/start/jquery-ui.structure.css">
		<script src="../../js/lib/jquery-ui-1.12.1/start/external/jquery/jquery.js"></script>
		<script src="../../js/lib/jquery-ui-1.12.1/start/jquery-ui.js"></script>
		<style>
			#accordion-resizer {
				padding: 10px;
				width: 350px;
				height: 220px;
			}
		</style>
		<script>
			$(function() {
				$("#accordion").accordion({
					heightStyle: "fill"
				});
			});
			$(function() {
				$("#accordion-resizer").resizable({
					minHeight: 140,
					minWidth: 200,
					resize: function() {
						$("#accordion").accordion("refresh");
					}
				});
			});
		</script>
	</head>

	<body>
		<div class="progress"></div>
		<script type="text/javascript">
			var i = 10;
			var start = null;

			function step(timestamp) {
				if(!start) start = timestamp;
				var progress = timestamp - start;
				$(".progress").progressbar({
					value: i++
				});
				if(i <= 100) {
					window.requestAnimationFrame(step);
				}
			}
			requestAnimationFrame(step);
		</script>
	</body>

</html>